<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>location</title>
</head>

<body>

  <a href="#">页面跳转</a>
  <input type="checkbox" />

  <script>
    /*
      location对象,浏览器地址对象

      例如:
      https://www.baidu.com/news/today.html
      http://127.0.0.1:5500/61.bom-location.html
      http://127.0.0.1:5500/61.bom-location.html?username=admin&username=zs
      http://127.0.0.1:5500/61.bom-location.html?username=admin&username=zs#abc

      传输协议  
        http    Hypertext Transfer Protocol
        https   Hypertext Transfer Secure,更安全

      IP地址
        IPv4    192.168.110.2                   四段(0-255) 总数大概是: 43亿个,当今社会已不够用
        IPv6    fe80::6032:810b:7a6a:82a7%15    2^128（约3.4×10^38）, （43亿x43亿x43亿x43亿）
        域名: 例如www.baidu.com,它和IP地址的关系是关联映射关系,它是用来替代ip地址,方便记忆使用的

        注意: 本地ip除了写真正ip外,还可以使用127.0.0.1或者localhost代替

      端口:
        计算机中程序访问的接口,每台计算机(服务器)都有65535个端口,1024以下的都是系统占用的,我们不推荐使用,
        每个端口只能为一个程序提供服务,不能存在多个程序同用一个端口的情况(端口占用报错)
        注意: 有很多系统级别的软件安装启动后都会占用特定的端口,这些端口我们也是要避免的,
              例如mysql数据库3306,tomcat服务器8080,redis数据库6379,MongoDB 27017...
              如果端口是80,则地址中可以直接省略!!!

      以上三个要素合称为网络访问三要素!

      location对象

        常用属性:
          protocol 	    协议
          hostname 	    ip
          port          端口号
          host 	        ip+端口

          href 	        返回完整的URL(重点)
          pathname 	    返回的URL路径名
          search 	      返回一个URL的查询部分
          hash 	        返回一个URL的锚部分

        常用函数:
          reload()  
    */
    console.log(location.protocol);
    console.log(location.hostname);
    console.log(location.port);
    console.log(location.host);
    console.log(location.href);
    console.log(location.pathname);
    console.log(location.search);
    console.log(location.hash);

    document.querySelector('a').onclick = function () {
      //JS页面动态跳转
      //location.href = 'https://www.baidu.com'

      //reload()函数用来重载页面
      //注意:有些页面元素例如表单控件具有缓存,所以普通刷新(F5)无法重置
      //普通刷新,相当于F5
      //location.reload()

      //强制刷新,相当于ctrl+ F5
      location.reload(true)
    }
  </script>
</body>

</html>